<template>
  <div class="edit-name">
    <!-- 头部 -->
    <van-nav-bar 
      @click-left="$emit('close')"
      @click-right="submit"
      title="编辑昵称"
      left-text="取消" 
      right-text="确定" />
    <!-- 输入框 -->
    <van-field 
      maxlength="7"
      show-word-limit
      v-model="message"
      class="message" 
      placeholder="请输入昵称" 
      type="textarea"  
      :rows="3" />
  </div>
</template>

<script>
import { updateUserInfo } from '@/api/user'
  export default {
    data() {
      return {
        message: this.value
      }
    },
    props:{
      value:{
        type:String,
        require:true
      }
    },
    methods: {
      async submit() {
        if(!this.message) return this.$toast.fail('请输入昵称')
        try {
          // 等待
          this.$toast.loading({
            message:'更新中',
            duration:0
          })
          // 发送请求
          await updateUserInfo({
            name:this.message
          })
          this.$toast.success('更新成功')
          this.$emit('input',this.message) // 更新外面数据
          this.$emit('close') // 关闭
        } catch (error) {
          console.log(error);
          this.$toast.fail('更新失败')
        }
      }
    },
  }
</script>

<style lang="less" scoped>
.edit-name{
  background-color: #f5f5f5;
  height: 100%;
  .message{
     margin: 30px;
     width: auto;
  }
}
</style>